<script setup lang="ts">
import { RandomTestingPageType } from '../../constants/RandomTesting'
import InterviewQuestions from './cmpt/InterviewQuestions/InterviewQuestions.vue'
import DonePage from './cmpt/DonePage/DonePage.vue'
import ErrorPage from './cmpt/ErrorPage/ErrorPage.vue'
import { useRandomTestingStore } from '../../store'
import { useKeyUpListener } from './hooks/useKeyUpListener'
import PcPageHeader from './cmpt/PcPageHeader/PcPageHeader.vue'

const rootStore = useRandomTestingStore()
const { plainStore } = rootStore
const { pageType, onClickPre, onClickNext, onToggleShowAnswer } = plainStore
useKeyUpListener(onClickPre, onClickNext, onToggleShowAnswer)
</script>

<template>
  <BaseLayout>
    <WithHeaderLayout :auto-show="false">
      <template #header>
        <PcPageHeader></PcPageHeader>
      </template>
      <div class="continer">
        <template v-if="pageType === RandomTestingPageType.InterviewQuestions">
          <InterviewQuestions></InterviewQuestions>
        </template>
        <template v-else-if="pageType === RandomTestingPageType.DonePage">
          <DonePage></DonePage>
        </template>
        <template v-else>
          <ErrorPage></ErrorPage>
        </template>
      </div>
    </WithHeaderLayout>
  </BaseLayout>
</template>

<style lang="less" scoped>
.continer {
  width: 100%;
}
</style>
